<template>
  <div id="MyBazaar">
    <div class="content">
      <div class="details">
        <div>
          <p>应用市场</p>
        </div>
        <div>
          <ul>
            <li class="active">
              <router-link to="/mybazaar/yisong">易送</router-link>
            </li>
            <li>
              <router-link to="/mybazaar/maiya">麦芽田</router-link>
            </li>
            <li>
              <router-link to="/mybazaar/waimai">外卖来了</router-link>
            </li>
            <li>更多应用（敬请期待）</li>
          </ul>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "MyBazaar"
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}
a {
  text-decoration: none;
}
#MyBazaar {
  width: 100vw;
  background: rgb(240, 242, 245);
}
.content {
  width: 70vw;
  margin: 0 auto;
}
.details {
  width: 65vw;
  background: #fff;
  margin: 0px auto;
  padding: 0 25px;
}
.details div p {
  padding: 40px 0 24px 0;
  font-size: 20px;
  font-weight: 400;
  color: #333;
}
.details div ul {
  display: flex;
  padding-bottom: 30px;
  border-bottom: 1px solid rgb(226, 225, 225);
}
.details div ul li {
  padding: 9px 36px;
  height: 20px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
  line-height: 20px;
  margin-right: 10px;
}
.details div ul li:nth-child(4) {
  color: #888;
}
.details div ul .active {
  background: rgb(24, 144, 255);
  color: #fff;
}
</style>